<!-- Created by jack on 2022/4/2 - 13:34 -->
<style scoped lang="less">

</style>

<template>
  <Window type="aside" id="netEasyMusic" :windowConfig="windowConfig" @close="netEasyMusicStore.$state?.player?.pause()">
    <template v-slot:aside>
      <!--   用户信息   -->
      <User />
      <!--   功能列表   -->
      <SelectBox :item-list="itemList"  v-model:value="navName"/>
    </template>
    <!--  主内容顶部  -->
    <template v-slot:content-header>
      <ContentHeader :nav="navName"/>
    </template>
    <!--  主内容  -->
    <template v-slot:content>
      <component :is="page[pageRoute]"></component>
    </template>
    <!--  播放器窗体  -->
    <template v-slot:default>
      <player-box />
    </template>
  </Window>
</template>

<script setup lang="ts">
import page from './pages'
import Window from "@/components/window";
import User from './modules/index/user.vue'
import SelectBox from './components/selectBox.vue'
import ContentHeader from './modules/index/contentHeader.vue'
import playerBox from './modules/index/playerBox.vue'
import {computed, ref} from "vue";
import netEasyMusicStore from './store'
const windowConfig = ref({ // 窗口配置项
  top:'100px',
  left:'calc(50% - 450px)',
  width:'900px',
  minWidth:'900px',
  height:'664px',
  minHeight:'600px',
  asideMinWidth:'160px',
  asideMaxWidth:'160px',
  asideBgColor:'rgba(208,208,208,0.95)',
  contentBgColor:'rgba(255,255,255,0.95)'
})
const navName = ref('findMusic')
const pageRoute = computed(() => netEasyMusicStore.$state.pageRoute)
// 基础功能列表
const itemList = ref([
  { icon:'https://s6.bihukankan.com/img/1641630104default-avatar.svg',name:'发现音乐',value:'findMusic' },
  { icon:'https://s6.bihukankan.com/img/1641630104default-avatar.svg',name:'私人FM',value:'myFM' },
  { icon:'https://s6.bihukankan.com/img/1641630104default-avatar.svg',name:'视频',value:'video' },
  { icon:'https://s6.bihukankan.com/img/1641630104default-avatar.svg',name:'关注',value:'subscript' },
])

/** 关闭窗口回调 */
const handleClose = () => {
}
</script>
